<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/integral/integral_shop.css">
    <title>积分商城-商品详情</title>
</head>

<body>
    <headers</headers> <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>

        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <ul class="sub_nav fl">
                    <li class="active">积分商城</li>
                </ul>
            </div>
        </div>

        <div class="shop_mall wrap">
            <a href="integral.html">积分商城</a> &gt; {{object.goodsName}}
        </div>

        <!-- 商品详情 -->
        <div class="product_detail wrap">
            <div class="integral_img fl">
                <img :src="object.goodsImage" alt="">
            </div>
            <div class="detail_box fl">
                <p class="detail_tit">{{object.goodsName}}</p>
                <p class="change_num">累计兑换量：{{object.soldNum}}次</p>
                <div class="money">
                    <span class="money_tit">价格</span><span class="money_detail">{{object.goodsPrice}}</span><span class="money_unit">积分</span>
                </div>
                <div class="active_time">
                    <span>活动时间</span><span class="time_detail">{{object.periodValidityBegin.substring(0, 10)}} 至
                        {{object.periodValidityEnd.substring(0, 10)}}</span>
                </div>

                <div class="buy_btn cursor" @click='buy_btn'>
                    立即兑换
                </div>
                <div class="change_record" @click='integral_order'>
                    兑换记录
                </div>
            </div>
        </div>

        <div class="wrap detail_introduce ql-editor" v-html='object.goodsDetail'>
        </div>


        <div class="popup" v-show='popup'>
            <p class="popup_tit">兑换</p>
            <p class="use_integral">消耗 <span>{{object.goodsPrice}}</span> 积分</p>
            <div class="btn_box">
                <div class="confirm cursor fl" @click='confirm'>
                    确定
                </div>
                <div class="concel cursor fl" @click='concel'>
                    取消
                </div>
            </div>
        </div>

        <div class="exchange_popup" v-show="exchange_popup">
            <p class="popup_tit">兑换</p>
            <p class="use_integral">消耗 <span>{{object.goodsPrice}}</span> 积分</p>
            <div class="max_height">
                <div class="popup_add clear_both" v-for='(item,index) in address_list' @click='popup_add(index,item.id)' :class="{active:exchange_active==index}">
                    <div class="fl add_tit">
                        收货地址：
                    </div>
                    <div class="fl add_detail">
                        <span class="add_name">
                            {{item.consigneeRealname}}
                        </span>
                        <span class="add_name">
                            {{item.consigneeMobilePhone}}
                        </span>
                        <div>{{item.provinceName}} {{item.cityName}} {{item.districtName}} {{item.consigneeAddress}} </div>
                    </div>
                </div>
            </div>
            <div class="exchange_confirm cursor fl" @click='exchange_confirm'>
                确定
            </div>
            <div class="exchange_concel cursor fl" @click='exchange_concel'>
                取消
            </div>
        </div>
            <div class="wrap clear_both">
               <div class="wrap clear_both">             <productfooter></productfooter>         </div>
            </div>
        </div>
        
        <script src="../js/axios.js"></script>
        <script src="../js/qs.js"></script>
        <script src="../js/swiper-4.3.5.min.js"></script>
        <script src="../js/browser.min.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../js/element.js"></script>
        <script src="../js/main.js"></script>
        <script type="text/babel">
            var app = new Vue({
            el: '#app',
            data() {
                return {
                    car_active:false,
                    id:'',
                    groups:3,
                    popup:false,
                    object:'',
                    exchange_popup:false,
                    exchange_active:0,
                    address_list:'',
                    add_id:''
                };
            },
            created() {
                
            },
            mounted() {
                this.id = this.GetQueryString().id
                this.goods_list()
                this.userAddress()
            },
            methods: {
                GetQueryString(){
                    var obj = new Object()
                    var scan_url = decodeURI(window.location.href).split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
                // 地址列表
                userAddress(){
                    axios({
                        method:"POST",
                        url:base_url + "/userAddress/list",
                        data:Qs.stringify({

                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.address_list = res.data.data.list.list
                        for (let i = 0; i < res.data.data.list.list.length; i++) {
                            if (res.data.data.list.list[i].isDefault) {
                                app.add_id = res.data.data.list.list[i].id
                            }
                        }
                        
                        console.log(app.address_list)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 产品详情
                goods_list(){
                    axios({
                        method:"POST",
                        url:base_url + "/spGoods/findSpGoodsById",
                        data:Qs.stringify({
                            id:this.id
                        }),
                        headers:{
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.object = res.data.data.object
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                    // 提交
                exchange_confirm(){
                    axios({
                        method:"POST",
                        url:base_url + "/spOrder/submitSpOrder",
                        data:[{
                            goodsId:this.id,
                            addressId:this.add_id,
                            number:1
                        }],
                        headers:{
                            'Content-Type':'application/JSON',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.exchange_popup = false
                        window.location.href='../person_vip/person_integral_order.html  '
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                buy_btn:function(){
                    this.popup = true
                },
                concel:function(){
                    this.popup = false
                },
                confirm:function(){
                    app.popup = false
                    app.exchange_popup = true
                },
                exchange_concel(){
                    app.exchange_popup = false
                },
                popup_add(index,add_id){
                    this.add_id = add_id
                    app.exchange_active = index
                },
               
                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                integral_order(){
                    window.location.href='../person_vip/person_integral_order.html'  
                }
            }
        })
        
    </script>
</body>

</html>